<template>
  <div class="header-wrap">
    <header>
      {{ruleFormLocal.pageTitle}}
    </header>
    <option-right v-if="dateFactory.activeBorder">
      <div class="option-wrap">
        <el-form :model="ruleFormLocal" :rules="rules"  label-width="100px">
          <el-form-item label="页面名称" prop="pageTitle">
            <el-input v-model="ruleFormLocal.pageTitle"></el-input>
          </el-form-item>
          <!-- <el-form-item label="全局背景颜色" prop="bgColor">
            <el-radio-group v-model="ruleFormLocal.defaultBg">
              <el-radio :label="0">默认背景颜色</el-radio>
              <el-radio :label="1">自定义背景颜色</el-radio>
            </el-radio-group>
            <div class="option-color" v-if="ruleFormLocal.defaultBg == 1">
              <el-color-picker v-model="ruleFormLocal.bgColor" size="small" ></el-color-picker>
              <el-button size="small" @click="ruleFormLocal.bgColor = '#f7f7f7'">重置</el-button>
            </div>
          </el-form-item> -->
          <el-form-item label="小程序标题" prop="defaultColorBg">
           <el-radio-group v-model="ruleFormLocal.defaultHeadBg">
              <el-radio :label="0">默认头部背景颜色</el-radio>
              <el-radio :label="1">自定义背景颜色</el-radio>
            </el-radio-group>
            <div class="option-color" v-if="ruleFormLocal.defaultHeadBg == 1">
              <el-color-picker v-model="ruleFormLocal.bgHeadColor" size="small" ></el-color-picker>
              <el-button size="small" @click="ruleFormLocal.bgHeadColor = '#f7f7f7'">重置</el-button>
            </div>
          </el-form-item>
          <el-form-item label="字体颜色" prop="pageDesc">
            <el-radio-group v-model="ruleFormLocal.defaultColorBg">
              <el-radio :label="0">默认字体颜色</el-radio>
              <el-radio :label="1">自定义字体颜色</el-radio>
            </el-radio-group>
            <div class="option-color" v-if="ruleFormLocal.defaultColorBg == 1">
              <el-color-picker v-model="ruleFormLocal.bgHeadTextColor" size="small" ></el-color-picker>
              <el-button size="small" @click="ruleFormLocal.bgHeadTextColor = '#f7f7f7'">重置</el-button>
            </div>
          </el-form-item>
          <!-- <el-form-item label="主题色" prop="selectedColorText">
            <div class="border-wrap">
              <el-color-picker v-model="ruleFormLocal.selectedColorText" size="small" ></el-color-picker>
              <el-link type="primary" :underline="false" @click="ruleFormLocal.selectedColorText == '#fff'">重置</el-link>
            </div>
          </el-form-item>
          <el-form-item label="副色" prop="selectedBgText">
            <div class="border-wrap">
              <el-color-picker v-model="ruleFormLocal.selectedBgText" size="small" ></el-color-picker>
              <el-link type="primary" :underline="false" @click="ruleFormLocal.selectedBgText == '#64c93f'">重置</el-link>
            </div>
          </el-form-item> -->
        </el-form>
      </div>
    </option-right>
  </div>
</template>

<script>
export default {
  name: 'HeaderTitle',
  props: {
    dateFactory: Object,
    index: Number,
    diyData: Array,
  },
  data() {
    return {
      ruleFormLocal: this.dateFactory.ruleForm,
      rules: {
        pageTitle: [
          { required: true, message: '请输入页面名称', trigger: 'blur' }
        ],
      }
    }
  },
  watch: {
    ruleFormLocal: {
      handler: function (newValue, oldVlue) {
        if (newValue.defaultBg == 0) {
          newValue.bgColor = '#f7f7f7';
        }
        this.$store.dispatch('SettingChange', {bgColor: newValue.bgColor})
        this.diyData[this.index].ruleForm = newValue

        if (this.ruleFormLocal.page == 'AboutWe') {
           this.$EventBus.$emit('diyFactoryAboutMe', this.diyData)
        } else if (this.ruleFormLocal.page == 'CurriculumSchedule') {
            this.$EventBus.$emit('diyFactoryCurriShe', this.diyData)
        } else if (this.ruleFormLocal.page == 'Home') {
           this.$EventBus.$emit('diyFactory', this.diyData)
        }else if (this.ruleFormLocal.page == 'ArticleDetail') {
           this.$EventBus.$emit('diyFactoryArticleDetail', this.diyData)
        }else if (this.ruleFormLocal.page == 'MyPage') {
           this.$EventBus.$emit('diyFactoryMyPage', this.diyData)
        }
        console.log(newValue, 'newValuenewValue',oldVlue)
      },
      deep: true,
    }

  },
  computed: {
    'ruleFormLocal.bgColor': {
      get() {
        return this.ruleFormLocal.bgColor;
      },
      set(val) {
        console.log(val, 'valvalv')
        this.$store.dispatch('SettingChange', {bgColor: val})
      }
    }
  },
  mounted() {
  },
  methods: {
    stopPro() {

    }

  },
}
</script>

<style lang="less" scoped>
	.header-wrap {
    background: url('../assets/static/img/header.png') no-repeat;
    height: 73px;
    background-size: 100% 100%;
    header {
      display: inline-block;
      padding: 27px 60px 0;
      height: 64px;
      line-height: 40px;
      width: 250px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-weight: 700;
      font-size: 16px;
      text-align: center;
      vertical-align: middle;
      color: #fff;
    }
  }

  // 操作部分
  .option-wrap .option-color{
    display: flex;
    align-items: center;
    .el-button {
      margin-left: 15px;
    }
    .el-color-picker {
      width: 50px;
      .el-color-picker__trigger {
         width: 50px;
      }
      
    }
  }
  .border-wrap {
    display: flex;
    align-items: center;
    .el-link {
      margin-left: 10px;
    }
  }
  
  
</style>